import React, { useEffect, useState } from 'react';
import { NavBar, Tabs } from 'antd-mobile'; // 移除未使用的组件
import request from './api/request';

function App() {
  const [data1, setData1] = useState([]);

  const getList = async () => {
    try {
      const reslist = await request.get('/api/room/list');
      const newData = reslist.data.data.list || []; // 处理可能的空响应
      setData1(newData); // 正确更新状态
      console.log('数据加载成功:', newData);
    } catch (error) {
      console.error('数据加载失败:', error);
      // 可选：添加 Toast 提示用户
      // Toast.show('数据加载失败，请重试');
    }
  };

  useEffect(() => {
    getList();
  }, []); // 仅在挂载时获取数据

  return (
    <div style={{ flex: 1, backgroundColor: '#fff' }}> {/* 添加基础样式 */}
      <NavBar>上海→北京</NavBar>

      <Tabs>
        <Tabs.Tab title="直达" key="direct">
          {data1.length ? (
            data1.map((item, index) => (
              <div key={item.id || `item-${index}`}> {/* 使用唯一 key */}
                {item.name}
              </div>
            ))
          ) : (
            <div style={{ padding: 16 }}>暂无直达车次/航班信息</div>
          )}
        </Tabs.Tab>
        <Tabs.Tab title="机票" key="flight">
          机票查询
        </Tabs.Tab>
        <Tabs.Tab title="汽车票" key="bus">
          汽车票查询
        </Tabs.Tab>
        <Tabs.Tab title="中转" key="transfer">
          中转方案
        </Tabs.Tab>
      </Tabs>
    </div>
  );
}

export default App;